/*
VARIOUS STYLES FOR TABLES
----------------------------------------------------------*/

/* Common for all table types */
table.layout, table.list, table.details, table.table { border-collapse: collapse; border-spacing: 0; line-height: 100%; table-layout: fixed; }
    table.layout caption, table.list caption, table.details caption, table.table caption { font-size: 110%; font-weight: bold; padding: 5px 5px 10px 15px; text-align: left; }
    table.layout > tbody > td, table.list > tbody > td, table.details > tbody > td, table.table > tbody > td,
    table.layout thead th, table.list thead th, table.details thead th { white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ white-space: pre-wrap; /* css-3 */ /* Smeta Firefox-u */ }

    /* Layout talbe */
    table.layout > tbody > tr > td, table.table > tbody > tr > td { padding: 1px 3px; text-align: left; vertical-align: middle; }

/* List table */
table.list, table.table { background: #ffffff; border: 0px solid #dddddd; text-align: left; width: 100%; }
    table.list > thead, table.table > thead { border-bottom: solid 0px #dddddd; }
        table.list > thead > tr, table.table > thead > tr { background-color: #ffffff; border-bottom: solid 2px #dddddd; }
            table.list > thead > tr > th, table.table > thead > tr > th { font-size: 1.1rem; font-weight: bold; padding: 7px 5px; text-align: left; vertical-align: middle; }
        table.list > thead > th.icon-column, table.table > thead > th.icon-column { width: 20px !important; }
    table.list > tbody > tr, table.table > tbody > tr { border-bottom: solid 1px #dddddd; }
        table.list > tbody > tr:nth-child(even) { background: #f5f5f5; }
        table.list > tbody > tr:hover { /*background:#f1f8ff;color:#03535f;*/ background: #d3e3ff; cursor: default; }
        table.list > tbody > tr > td, table.table > tbody > tr > td { border: none; padding: 4px 5px; vertical-align: middle; }

/*table.list a, table.list a:hover, table.list a:visited{text-decoration:none;}*/

/* Details table */
table.details { border-left: 1px solid #dddddd; border-top: 1px solid #dddddd; }
    table.details > tbody > td { border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd; padding: 5px; vertical-align: middle; }
        table.details > tbody > td.label { background-color: #d3e3ff /*a6c8ff*/; color: #000000; font-weight: bold; text-align: left; }
        table.details > tbody > td.content { background-color: #fbfbfb; text-align: left; }

/* Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
@media all and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table.responsive, table.responsive > thead, table.responsive > tbody,
    table.responsive > thead > tr, table.responsive > tbody > tr,
    table.responsive > thead > tr > th, table.responsive > tbody > tr > td { display: block; }
        /* Hide table headers (but not display: none;, for accessibility) */
        table.responsive > thead > tr { position: absolute; top: -9999px; left: -9999px; }
        /*tr { border: 1px solid #ccc; }*/
        table.responsive > tbody > tr > td { /* Behave  like a "row" */ /*border: none; border-bottom: 1px solid #eee;*/ position: relative; padding-left: 50%; }
            table.responsive > tbody > tr > td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ /*top: 6px;*/ left: 6px; width: 45%; /*padding-right: 10px;*/ white-space: nowrap; }
}

div.table-layout { }
    div.table-layout > div.header-row { border-bottom: 2px solid #dddddd; }
        div.table-layout > div.header-row > div.header-cell { font-weight: bolder; overflow: hidden; /*white-space: nowrap;*/ padding: 7px 5px; }
    div.table-layout > .group-header-row { background-color: #e5e5e5; font-size: 1.1rem; font-weight: bolder; padding: 3px; margin-top: 1.5rem; }
    div.table-layout > .group-footer-row { font-weight: bolder; padding: 5px; }
    div.table-layout > div.clickable-row { cursor: pointer; }
    div.table-layout > div.data-row { border-bottom: 1px solid #dddddd; }
        div.table-layout > div.data-row:hover { background-color: #f5f5f5; }
        div.table-layout > div.data-row > div.data-cell { /*overflow: hidden; white-space: nowrap;*/ padding: 7px 5px; }
            div.table-layout > div.data-row > div.data-cell > strong { font-size: 1.2rem; }
            div.table-layout > div.data-row > div.data-cell > div.editor-label,
            div.table-layout > div.data-row > div.data-cell > div.editor-field { padding: 0; }
        div.table-layout > div.data-row > form > div.data-cell { /*overflow: hidden; white-space: nowrap;*/ padding: 5px; }
            div.table-layout > div.data-row > form > div.data-cell > div.editor-label { padding: 0 0 2px 0; }
            div.table-layout > div.data-row > form > div.data-cell > div.editor-field { padding: 0; }
                div.table-layout > div.data-row > form > div.data-cell > div.editor-label > strong,
                div.table-layout > div.data-row > form > div.data-cell > div.editor-field > strong { font-size: 1.2rem; }
        div.table-layout > div.data-row input,
        div.table-layout > div.data-row select { font-size: 1.1rem; padding: 2px; }

div.table-layout-with-buttons-column { }
    div.table-layout-with-buttons-column > div.header-row { padding-left: 70px; }
        div.table-layout-with-buttons-column > div.header-row > div.buttons-header-cell { position: absolute; width: 65px; left: 5px; top: 0px; padding: 0; }
    div.table-layout-with-buttons-column > div.data-row { padding-left: 70px; }
        div.table-layout-with-buttons-column > div.data-row > div.buttons-data-cell,
        div.table-layout-with-buttons-column > div.data-row > form > div.buttons-data-cell { position: absolute; width: 65px; left: 5px; top: 3px; padding: 0; }

div.table-layout-with-status-column { }
    div.table-layout-with-status-column > div.header-row { padding-left: 40px; }
        div.table-layout-with-status-column > div.header-row > div.buttons-header-cell { position: absolute; width: 35px; left: 5px; top: 0px; padding: 0; }
    div.table-layout-with-status-column > div.data-row { padding-left: 40px; }
        div.table-layout-with-status-column > div.data-row > div.buttons-data-cell,
        div.table-layout-with-status-column > div.data-row > form > div.buttons-data-cell { position: absolute; width: 35px; left: 5px; top: 0px; padding: 0; }


@media all and (max-width: 768px) {
    div.table-layout > div.header-row { display: none; }
}

@media all and (max-width: 600px) {
    div.table-layout-with-buttons-column > div.data-row { padding-left: 5px; }
        div.table-layout-with-buttons-column > div.data-row > div.buttons-data-cell,
        div.table-layout-with-buttons-column > div.data-row > form > div.buttons-data-cell { position: relative; width: 100%; padding: 3px 5px; }
}